<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, Ref } from 'vue';

  import { useECharts } from '@/hooks/web/useECharts';

  import { basicProps } from './props';

  export default defineComponent({
    props: basicProps,
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
         onMounted(() => {
      setOptions({
        toolbox: {},
        legend: {
          data: [ '汇率变化'],
        },
        grid: { left: '1%', right: '1%', top: '15  %', bottom: 0, containLabel: true },
        xAxis: [
          {
            type: 'category',
            data:['周一','周二','周三','周四','周五','周六','周天'],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '汇率变化',
            min: 0,
            max: 35,
            interval: 5,
            axisLabel: {
              // formatter: '{value} ml'
            },
          },
          {
            show: false,
            type: 'value',
            name: '汇率变化',
            min: 0,
            max: 35,
            interval: 5,
            axisLabel: {
              // formatter: '{value} °C'
            },
          },
        ],
        series: [
          {
            name: '汇率变化',
            type: 'line',
            yAxisIndex: 1,
            data: [20, 12, 14, 15, 25, 26, 3],
          },
        ],
      });
    });

      // onMounted(() => {
      //   setOptions({
      //     tooltip: {
      //       trigger: 'axis',
      //       axisPointer: {
      //         lineStyle: {
      //           width: 1,
      //           color: '#019680',
      //         },
      //       },
      //     },
      //     xAxis: {
      //       type: 'category',
      //       boundaryGap: false,
      //       data: [
      //         '周一' ,'周二' ,'周三' ,'周四', '周五' ,'周六' ,'周天'
      //       ],
      //       splitLine: {
      //         show: true,
      //         lineStyle: {
      //           width: 1,
      //           type: 'solid',
      //           color: 'rgba(226,226,226,0.5)',
      //         },
      //       },
      //       axisTick: {
      //         show: false,
      //       },
      //     },
      //     yAxis: [
      //       {
      //         type: 'value',
      //         max: 800,
      //         splitNumber: 8,
      //         axisTick: {
      //           show: false,
      //         },
      //         splitArea: {
      //           show: true,
      //           areaStyle: {
      //             color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
      //           },
      //         },
      //       },
      //     ],
      //     grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
      //     series: [
      //       {
      //         data: [
      //          200,100,300,520,150,260,300,140
      //         ],
      //         type: 'line',
      //         areaStyle: {},
      //         itemStyle: {
      //           color: '#5ab1ef',
      //         },
      //       },,
      //     ],
      //   });
      // });
      return { chartRef };
    },
  });
</script>
